<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">

    <div class="box-all">

      <div class="zhongjian">


        <div class="left">
          <h1>购物清单</h1>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增</el-button>
            </el-col>
          </el-row>


            <template>
              <el-table :data="tableData" style="width: 100%" max-height="500">
                <el-table-column fixed prop="materielId" label="编码" ></el-table-column>
                <el-table-column prop="materielCode" label="条码"></el-table-column>
                <el-table-column fixed prop="ypname" label="消费项目" ></el-table-column>
                <el-table-column prop="specification" label="规格" ></el-table-column>
                <el-table-column fixed prop="memberPrice" label="会员价" ></el-table-column>
                <el-table-column fixed prop="retailPrice" label="零售价" ></el-table-column>
                <el-table-column prop="planNum" label="数量" ></el-table-column>
                <el-table-column prop="amount" label="小计" ></el-table-column>
                <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="deleteRow(scope.$index, tableData)"
                      type="text"
                      size="small">
                      移除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>



        </div>



        <div class="right">


        </div>
      </div>


      <div class="bottom">
        <div id="app2">
          <el-row :gutter="10" class="mb8">
            <el-col :span="5">
              <el-button
                type="warning"
                round
                icon="el-icon-plus"
                @click="submitFormjz"
                v-hasPermi="['hospital:customer:add']"
              >去结账</el-button>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>

    <!-- 添加零售物品 -->
    <el-dialog :title="title" :visible.sync="open" width="300" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="ypname">
              <el-autocomplete
                popper-class="my-autocomplete"
                v-model="form.ypname"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入名称"
                @select="handleSelect">
                <i
                  class="el-icon-edit el-input__icon"
                  slot="suffix"
                  @click="handleSelect">
                </i>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="specification">{{ item.specification }}</span>

                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="规格" prop="specification">
              <el-input v-model="form.specification" placeholder="请输规格"  :disabled="true"/>
            </el-form-item>

          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">

            <el-form-item label="条码" prop="materielCode">
              <el-input v-model="form.materielCode" placeholder="请输入条码"  :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重量" prop="weight">
              <el-input v-model="form.weight" placeholder="请输入重量"  :disabled="true">
              <template slot="append">KG</template>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">

            <el-form-item label="会员价" prop="memberPrice">
              <el-input v-model="form.memberPrice" placeholder="请输入会员价"  :disabled="true">
              <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">

            <el-form-item label="零售价" prop="retailPrice">
              <el-input v-model="form.retailPrice" placeholder="请输入零售价"  :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">

          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>






        <el-form-item label="数量" prop="planNum">
          <el-input v-model="form.planNum" placeholder="请输入数量" />
        </el-form-item>

<!--        <el-form-item label="用量" prop="dosage">
          <el-input v-model="form.dosage" placeholder="请输入用量" />
        </el-form-item>
        <el-form-item label="用法" prop="medicationInstruction">
          <el-input v-model="form.medicationInstruction" placeholder="请输入用法" />
        </el-form-item>-->


        <el-form-item label="ID" prop="materielId"  v-if="isHidden">
          <el-input v-model="form.materielId" placeholder="请输入ID"  :disabled="true"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {listMateriel, retail } from "@/api/hospital/PetHospital";
import Brand from "@/views/hospital/Brand/index.vue";


export default {
  name: "Customer",
  components: { Brand },
  dicts: ['sys_user_sex', 'pet_sex', 'pet_type', 'consultation_status'],
  data() {
    return {
      //隐藏字段
      isHidden : false,
      // 总条数
      total: 0,
      // 遮罩层
      loading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        planNum: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],

      },
      tableData: [],
      MaterielList : [],
      // 处方药品查询参数
      querymaterie: {
        pageNum: 1,
        pageSize: 10,
        tenantId: null,
        deptId: null,
        name: null,
        classify: null,
        classifyS: null,
        supplier: null,
        brand: null,
        petType: null,
        expirationDate: null,
        barCode: null,
        barCodeS: null,
        specification: null,
        unit: null,
        standardPurchasingCost: null,
        averageCostPrice: null,
        retailPrice: null,
        memberPrice: null,
        negativeOnHandType: null,
        inventoryWarning: null,
        memberDiscountType: null,
        repurchaseType: null,
        weight: null,
        materielId: null
      },

      /*      //拼装数据
      this.jztest.customerPhone = '';
      this.jztest.userId = '';
      this.jztest.retailList = [];
      this.jztest.demo = {
        materielId : '1',
        materielCode : '2',
        number : '3',
      }
      */
      jzdemo : {},
      jztest : {
        customerPhone : null,
        userId : null,
        retailList : [], //处方明细 药品
        actualAmount : null,
      },


    };
  },


  created() {

  },

  methods: {
    //date数据移除
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加零售物品";
    },


    /** 搜索按钮操作 */
    handleQuery() {
      // this.getqueryOutboundOrder();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      //this.handleQuery();
    },


    /** 出库结算 */
    submitForm() {
      this.$refs["form"].validate(valid => {

        this.form.amount  = (Number(this.form.planNum) * Number(this.form.retailPrice)).toFixed(2)
        this.tableData.push(JSON.parse(JSON.stringify(this.form)));
        this.open = false;
        console.log(this.tableData)
        // 暂存在这个data。 接诊。复诊的时候获取这个data 判断是否有数据。  有的话将数据传入后台，进行缓存
      });
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },

    async querySearchAsync(queryString, cb) {
      const res = await this.MaterielList
      var restaurants = res
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      //@@  项目优化点   获取时间加大！！！！
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        // console.log(results)
        cb(results);
      }, 1000 * Math.random());
    },

    // 获取处方药品信息。
    async loadAll() {
      // 获取药品列表
      this.loading = true;
      const response =  await listMateriel(this.querymaterie)
      this.loading = false;
      //console.log(response)
      const list = response.rows.map(materie => ({ value: materie.name,
        materieId: materie.id ,
        specification :materie.specification , //规格型号
        materielCode:materie.barCode,       //条码
        retailPrice:materie.retailPrice, //零售价
        memberPrice:materie.memberPrice, //会员价格
        memberDiscountType:materie.memberDiscountType, //是否参与会员打折
        weight:materie.weight, //重量

      }));
      return list;
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
      };
    },
    handleSelect(item) {
      //选中药品，  将药品名称写入到 输入框。 规格型号回传到 from
      this.form.specification = item.specification;
      this.form.materielCode = item.materielCode;
      this.form.materielId = item.materieId;
      this.form.weight = item.weight;
      this.form.memberPrice = item.memberPrice;
      this.form.retailPrice = item.retailPrice;
    },

    /** 结束就诊 */
    submitFormjz() {


          //拼装数据
          this.jztest.customerPhone = '';
          this.jztest.userId = '';
          this.jztest.retailList = [];
          this.jzdemo = {
            materielId : '1',
            materielCode : '2',
            number : '3',
          }
          this.jztest.retailList.push(this.jztest.demo)
          this.jztest.actualAmount = '1';

          console.log(this.jztest)
      alert("结算完成")
          retail(this.jztest).then(response => {
            this.$modal.msgSuccess("零售结算完成");
            //清空 queryparam 数据
            this.reset();
          });



    },

  },


  mounted() {
    this.MaterielList = this.loadAll();
  }
};
</script>
<style>

.box-all {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hospital {
  margin-left: 45%;
  height: 100px;
}
.zhongjian{
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}
.left{
  width: 100%;
  margin-right: 0%;
}

.right{
  width: 0%;
  margin-left: 0%;

}
.bottom{
  margin-left: 20%;

  height: 100px;
}

.name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.addr {
  font-size: 12px;
  color: #b4b4b4;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;



    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
